<template>
  <div style="width: 1200px; margin: 0 auto">
    <div class="container">
      <div class="menu_div" style="width: 200px">
        <div class="menu_body">
          <div class="menu_body_div1">
            <i class="fas fa-bread-slice" style="color: #e53;"></i>
            &nbsp;
            <a href="" style="font-size: 18px;">宠物食品</a>
            <span></span>
          </div>
          <div class="menu_body_div2">
            <span><a href="#dogFood">狗粮</a></span>
            <span><a href="#catFood">猫粮</a></span>
            <span><a href="#snacks">零食</a></span>
            <span><a href="#can">罐头</a></span>
            <span style="width: 100px"><a href="">特殊功能食品</a></span>
          </div>
        </div>
        <div class="menu_body">
          <div class="menu_body_div1">
            <i class="fas fa-grin" style="color: #e53;"></i>
            &nbsp;
            <a href="" style="font-size: 18px;">宠物玩具</a>
            <span></span>
          </div>
          <div class="menu_body_div2">
            <span style="width: 70px;margin-right: 20px"><a href="">咬咬玩具</a></span>
            <span style="width: 70px;margin-right: 10px"><a href="">智力玩具</a></span>
            <span style="width: 70px;margin-right: 20px"><a href="">互动玩具</a></span>
            <span style="width: 70px;margin-right: 10px"><a href="">散步玩具</a></span>
          </div>
        </div>
        <div class="menu_body">
          <div class="menu_body_div1">
            <i class="fas fa-gift" style="color: #e53;"></i>
            &nbsp;
            <a href="" style="font-size: 18px;">宠物保健</a>
            <span></span>
          </div>
          <div class="menu_body_div2">
            <span style="width: 70px;margin-right: 20px"><a href="">洗护用品</a></span>
            <span style="width: 80px;margin-right: 10px"><a href="">食品添加剂</a></span>
            <span style="width: 70px;margin-right: 20px"><a href="">护理用品</a></span>
            <span><a href="">药品</a></span>
          </div>
        </div>
        <div class="menu_body">
          <div class="menu_body_div1">
            <i class="fas fa-hat-wizard" style="color: #e53;"></i>
            &nbsp;
            <a href="" style="font-size: 18px;">宠物服饰</a>
            <span></span>
          </div>
          <div class="menu_body_div2">
            <span style="width: 70px;margin-right: 30px"><a href="">背心/T恤</a></span>
            <span style="width: 70px;"><a href="">外套/保暖</a></span>
            <span style="width: 90px;margin-right: 10px"><a href="">领带/蝴蝶结</a></span>
            <span style="width: 90px;"><a href="">派对服/礼服</a></span>
          </div>
        </div>
        <div class="menu_body">
          <div class="menu_body_div1">
            <i class="fas fa-gamepad" style="color: #e53;"></i>
            &nbsp;
            <a href="" style="font-size: 18px;">宠物用品</a>
            <span></span>
          </div>
          <div class="menu_body_div2">
            <span style="width: 70px;margin-right: 20px"><a href="">狗窝/猫窝</a></span>
            <span style="width: 70px;margin-right: 20px"><a href="">训练用品</a></span>
            <span style="width: 70px;margin-right: 20px"><a href="">安全用品</a></span>
          </div>
        </div>
      </div>
      <div>
        <div class="block" style="width: 800px;margin: 0 auto">
          <el-carousel indicator-position="outside">
            <el-carousel-item>
              <a><img src="/images/banner/banner01.png"></a>
            </el-carousel-item>
            <el-carousel-item>
              <a href="/sys-user/product/new_client"><img src="/images/banner/banner02.png"></a>
            </el-carousel-item>
            <el-carousel-item>
              <a><img src="/images/banner/banner03.png"></a>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!--  轮播图下的小图片  -->
        <div id="below_banner_img">
          <a><img src="/images/homepage/img03.png"></a>
          <a><img src="/images/homepage/img04.png"></a>
          <a><img src="/images/homepage/img05.png"></a>
        </div>
      </div>
      <div class="container_right_div">
        <img src="/images/homepage/img01.png" alt="">
        <img src="/images/homepage/img02.jpg" alt="" width="200px" height="218px">
      </div>
    </div>
    <!--  新人福利  -->
    <div class="product_div">
      <a href="/sys-user/product/new_client">
        <h1 style="text-align: left">新人福利</h1>
        <img src="/images/homepage/img.png" alt="" width="1200px">
      </a>
    </div>
    <!--  火爆商品  -->
    <div class="product_div" style="margin: 40px auto 40px 10px;overflow: hidden">
      <div>
        <h2 style="text-align: left;">火爆商品</h2>
        <a href="" @click="refresh" class="product_div_a">
          <i class="el-icon-refresh-right"></i>
          换一批</a>
      </div>
      <div style="margin:30px auto 0 auto;">
        <el-col :span="4" v-for="p in hotProductArr" :key="p.id" style="margin: 10px 0;width: 225px;margin-right: 10px">
          <el-card :body-style="{ padding: '0px'}">
            <el-image
                style="width: 200px;"
                :src="JSON.parse(p.pictures)[0].url"
                @click="loadProductDetails(p.id)"
                fit="fit"></el-image>
            <div style="padding: 14px;" @click="loadProductDetails(p.id)">
              <div class="bottom clearfix">
                <a href="">
                  <span class="product_title_span">{{ p.title }}</span></a>
              </div>
              <el-button type="text" class="button" style="line-height: 20px" @click="$router.puth('/')">
              </el-button>
              <p style="font-size: 16px">
                <b>￥{{ p.discountPrice }}</b> &nbsp; <s>{{ p.originalPrice }}</s>
                <span style="float: right;">销量：{{ p.sales }}件</span>
              </p>
            </div>
          </el-card>
        </el-col>
      </div>
    </div>
    <!--  知名品牌，放心选择  -->
    <div class="product_div" style="margin: 40px auto 40px 10px;overflow: hidden;">
      <h2 style="text-align: left">知名品牌 放心选择</h2>
      <a href="" class="product_div_a" @click=" this.$router('/sys-user/product/brand')">
        <i class="el-icon-d-arrow-right"></i>
        更多品牌</a>
      <div style="margin:30px auto 0 auto;">
        <el-col :span="4" v-for="b in brandArr" :key="b.id"
                style="margin: 10px 0;width: 225px;margin-right: 10px;margin-top: 10px">
          <el-card :body-style="{ padding: '0px'}">
            <el-image
                style="width: 200px;"
                :src="'/images/brand-image/' + b.logo"
                fit="fit"></el-image>
          </el-card>
        </el-col>
      </div>
    </div>
    <!--  狗粮  -->
    <div class="product_div" name="dogFood" style="margin: 40px auto 40px 10px;overflow: hidden">
      <div>
        <h2>
          <i class="fas fa-dog"></i>&nbsp;
          <a href="" style="font-size: 18px;">狗粮</a>
        </h2>
      </div>
      <div style="margin:30px auto 0 auto;">
        <el-col :span="4" v-for="p in dogFoodArr" :key="p.id" style="margin: 10px 0;width: 225px;margin-right: 10px">
          <el-card :body-style="{ padding: '0px'}">
            <el-image
                style="width: 200px;"
                :src="JSON.parse(p.pictures)[0].url"
                @click="loadProductDetails(p.id)"
                fit="fit"></el-image>
            <div style="padding: 14px;" @click="loadProductDetails(p.id)">
              <div class="bottom clearfix">
                <a href="">
                  <span class="product_title_span">{{ p.title }}</span></a>
              </div>
              <el-button type="text" class="button" style="line-height: 20px" @click="$router.puth('/')">
              </el-button>
              <p style="font-size: 16px">
                <b>￥{{ p.discountPrice }}</b> &nbsp; <s>{{ p.originalPrice }}</s>
                <span style="float: right;">销量：{{ p.sales }}件</span>
              </p>
            </div>
          </el-card>
        </el-col>
      </div>
    </div>
    <!--  猫粮 -->
    <div class="product_div" name="catFood" style="margin: 40px auto 40px 10px;overflow: hidden">
      <div>
        <h2>
          <i class="fas fa-cat"></i>&nbsp;
          <a href="" style="font-size: 18px;">猫粮</a>
        </h2>
      </div>
      <div style="margin:30px auto 0 auto;">
        <el-col :span="4" v-for="p in catFoodArr" :key="p.id" style="margin: 10px 0;width: 225px;margin-right: 10px">
          <el-card :body-style="{ padding: '0px'}">
            <el-image
                style="width: 200px;"
                :src="JSON.parse(p.pictures)[0].url"
                @click="loadProductDetails(p.id)"
                fit="fit"></el-image>
            <div style="padding: 14px;" @click="loadProductDetails(p.id)">
              <div class="bottom clearfix">
                <a href="">
                  <span class="product_title_span">{{ p.title }}</span></a>
              </div>
              <el-button type="text" class="button" style="line-height: 20px" @click="$router.puth('/')">
              </el-button>
              <p style="font-size: 16px">
                <b>￥{{ p.discountPrice }}</b> &nbsp; <s>{{ p.originalPrice }}</s>
                <span style="float: right;">销量：{{ p.sales }}件</span>
              </p>
            </div>
          </el-card>
        </el-col>
      </div>
    </div>
    <!--  零食 -->
    <div class="product_div" name="snacks" style="margin: 40px auto 40px 10px;overflow: hidden">
      <div>
        <h2 style="color: orange">
          <i class="fas fa-cookie"></i>&nbsp;
          <a href="" style="font-size: 18px;">零食</a>
        </h2>
      </div>
      <div style="margin:30px auto 0 auto;">
        <el-col :span="4" v-for="p in snacksArr" :key="p.id" style="margin: 10px 0;width: 225px;margin-right: 10px">
          <el-card :body-style="{ padding: '0px'}">
            <el-image
                style="width: 200px;"
                :src="JSON.parse(p.pictures)[0].url"
                @click="loadProductDetails(p.id)"
                fit="fit"></el-image>
            <div style="padding: 14px;" @click="loadProductDetails(p.id)">
              <div class="bottom clearfix">
                <a href="">
                  <span class="product_title_span">{{ p.title }}</span></a>
              </div>
              <el-button type="text" class="button" style="line-height: 20px" @click="$router.puth('/')">
              </el-button>
              <p style="font-size: 16px">
                <b>￥{{ p.discountPrice }}</b> &nbsp; <s>{{ p.originalPrice }}</s>
                <span style="float: right;">销量：{{ p.sales }}件</span>
              </p>
            </div>
          </el-card>
        </el-col>
      </div>
    </div>
    <!--  罐头 -->
    <div class="product_div" name="can" style="margin: 40px auto 40px 10px;overflow: hidden">
      <div>
        <h2 style="color: orange">
          <i class="fas fa-prescription-bottle"></i> &nbsp;
          <a href="" style="font-size: 18px;">罐头</a>
        </h2>
      </div>
      <div style="margin:30px auto 0 auto;">
        <el-col :span="4" v-for="p in canArr" :key="p.id" style="margin: 10px 0;width: 225px;margin-right: 10px">
          <el-card :body-style="{ padding: '0px'}">
            <el-image
                style="width: 200px;"
                :src="JSON.parse(p.pictures)[0].url"
                @click="loadProductDetails(p.id)"
                fit="fit"></el-image>
            <div style="padding: 14px;" @click="loadProductDetails(p.id)">
              <div class="bottom clearfix">
                <a href="">
                  <span class="product_title_span">{{ p.title }}</span></a>
              </div>
              <el-button type="text" class="button" style="line-height: 20px" @click="$router.puth('/')">
              </el-button>
              <p style="font-size: 16px">
                <b>￥{{ p.discountPrice }}</b> &nbsp; <s>{{ p.originalPrice }}</s>
                <span style="float: right;">销量：{{ p.sales }}件</span>
              </p>
            </div>
          </el-card>
        </el-col>
      </div>
    </div>
    <span v-if="showImagesGroup1">
      <!-- 第一个窗口 -->
      <img src="../../../../public/images/index/guanggaoLeft.jpg" style="width: 180px;position: fixed;top: 33%;left: 50%;margin-top: -90px;margin-left: -900px">
      <i class="el-icon-error" style="width: 180px;position: fixed;top: 33%;left: 50%;margin-top: 390px;margin-left: -828px;font-size: 25px" @click="hideImagesGroup1"></i>
    </span>

    <span v-if="showImagesGroup2">
      <!-- 第二个窗口 -->
      <img src="../../../../public/images/index/guanggaoright.jpg" style="width: 180px;position: fixed;top: 33%;right: 54%;margin-top: -90px;margin-right: -980.5px">
      <i class="el-icon-error" style="width: 180px;position: fixed;top: 33%;right: 54%;margin-top: 390px;margin-right: -1055px;font-size: 25px" @click="hideImagesGroup2"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: "indexView",
  data() {
    return {
      // productArr: [],
      src: '',
      url: '',
      showImagesGroup1: true,
      showImagesGroup2: true,
      items: [
        'banner01.png',
        'banner02.png',
        'banner03.png'],
      hotProductArr: [],
      brandArr: [{
        id: '',
        logo: '',
      }],
      dogFoodArr: [],
      catFoodArr: [],
      snacksArr: [],
      canArr: [],
      page: 1,
    };
  },
  methods: {
    //跳转至品牌馆
    // loadAllBrand(){
    //   this.$router.push('/sys-user/product/brand');
    // },
    hideImagesGroup1() {
      this.showImagesGroup1 = false;
    },
    hideImagesGroup2() {
      this.showImagesGroup2 = false;
    },
    //定点跳转
    goToSection(sectionId) {
      this.$router.push({ hash: sectionId });
    },
    //加载页码
    loadPage(){

    },
    //换一批
    refresh() {
      if (this.page >= 4) {
        this.page = 1;
      } else {
        this.page = this.page + 1;
      }
      this.loadHotProduct();
    },
    //加载火爆商品
    loadHotProduct() {
      let url = 'http://localhost:14001/spu?pageNum=' + this.page;
      console.log('url = ' + url);
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.hotProductArr = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.pageCount = jsonResult.data.maxPage;
          this.total = jsonResult.data.total;
        }
      });
    },
    //加载知名品牌
    loadEstablishedBrand() {
      let url = 'http://localhost:14001/brand/list?pageNum=' + this.page;
      console.log('url = ' + url);
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.brandArr = []; // 确保 brandArr 是一个空数组
          for (let i = 0; i < jsonResult.data.list.length; i++) {
            const item = jsonResult.data.list[i];
            this.brandArr.push({
              id: item.id,
              logo: item.logo.split('/')[0]
            });
          }
          console.log(this.brandArr);
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.pageCount = jsonResult.data.maxPage;
          this.total = jsonResult.data.total;
        }
      });
    },
    //加载狗粮
    loadDogFood(){
      let url = 'http://localhost:14001/spu/listByCategoryId?categoryId=1';
      console.log('url = ' + url);
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.dogFoodArr = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.pageCount = jsonResult.data.maxPage;
          this.total = jsonResult.data.total;
        }
      });
    },
    //加载猫粮
    loadCatFood(){
      let url = 'http://localhost:14001/spu/listByCategoryId?categoryId=2';
      console.log('url = ' + url);
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.catFoodArr = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.pageCount = jsonResult.data.maxPage;
          this.total = jsonResult.data.total;
        }
      });
    },
    //加载零食
    loadSnacks(){
      let url = 'http://localhost:14001/spu/listByCategoryId?categoryId=3';
      console.log('url = ' + url);
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.snacksArr = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.pageCount = jsonResult.data.maxPage;
          this.total = jsonResult.data.total;
        }
      });
    },
    //加载罐头
    loadCan(){
      let url = 'http://localhost:14001/spu/listByCategoryId?categoryId=4';
      console.log('url = ' + url);
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.canArr = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.pageCount = jsonResult.data.maxPage;
          this.total = jsonResult.data.total;
        }
      });
    },
    //加载到商品详情页面
    loadProductDetails(spuId) {
      this.$router.push('/sys-user/product/details?spuId=' + spuId);
    },
  },
  mounted() {
    this.loadPage();
    this.loadHotProduct();
    this.loadEstablishedBrand();
    this.loadDogFood();
    this.loadCatFood();
    this.loadSnacks();
    this.loadCan();
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

img {
  border: none;
  vertical-align: middle;
}

h1 {
  color: #e53;
  font-size: 20px;
  font-weight: normal;
}

h2 {
  color: #e53;
  font-size: 20px;
  font-weight: normal;
  float: left;
}


.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*轮播图开始*/
.el-carousel__item h3 {
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

/*轮播图结束*/

#below_banner_img > a > img {
  float: left;
  background: #fff;
  width: 266px;
  height: 90px;
}

.menu_div {
  margin-top: -315px;
  width: 170px;
  height: 100px;
  margin-right: 3px;

}

.container_right_div {
  margin-top: -0px;
}

.menu_body {
  border: 1px solid darkgoldenrod;
  float: left;
  width: 200px;
  position: relative;
  display: inline-block;
  height: 82%;
}

.menu_body_div1 {
  position: absolute; /* 子级 div 设为绝对定位 */
  left: -50px; /* 将其左侧定位在父级 div 左侧 */
  top: 0;
  margin-bottom: 5px;
}

.menu_body_div2 {
  margin-bottom: 5px;
  position: absolute; /* 子级 div 设为绝对定位 */
  top: 25px;
}

.menu_body span {
  float: left;
  width: 55px;
  padding: 5px 0 0;
}

.menu_body a {
  color: #666;
}

.product_title_span {
  width: 200px;
  display: inline-block;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis;
}

/*设置图标颜色*/
.fa-dog {
  color: orange;
}

.fa-cat {
  color: orange;
}

.fa-dove {
  color: orange;
}

.fa-fish {
  color: orange;
}

.fa-mouse-pointer {
  color: orange;
}

.product_div {
  margin-top: 30px;
}

.product_div_a {
  float: right;
  color: #666;
}
</style>
